<template>
    <div class="branch-item" :style="{ width: (branchLineMargin*branchItem.maxwidth) + 'px', }">
        <!-- 支线线路 -->
         <div class="branch-content" :style="{
            width: (branchLineMargin*branchItem.maxwidth) + 'px',
            borderTop: branchItem.type === 'contact' || branchItem.type === 'empty' ? 'none' : '2px solid ' + lineColor
        }" v-if="branchItem.type !== 'contact' && branchItem.type !== 'empty'">
            <div class="branch-dot" :style="{ background: lineColor }"></div>
            <div class="branch-line" 
            :class="{ 'branch-line-active': branchItem.online>0 }" 
            :style="{
                background: lineColor,
                height: branchLineSize + 'px'
            }"></div>
            <!-- <img class="branch-div-img" v-if="branchItem.online>0" src="@/assets/images/jiantou_d.png" alt="" /> -->
            <div class="branch-div-table" :style="{bottom:  branchItem.senserList&&branchItem.senserList.length>0 ? '-20px' : '-0px' }" v-if="branchItem.senserList&&branchItem.senserList.length>0">
                <el-popover :width="650" placement="top">
                    <template #reference>
                        <div class="branch-div" >
                            设备信息
                        </div>
                    </template>
                    <template #default>
                        <el-table :data="branchItem.senserList" max-height="300px">
                            <el-table-column width="150" align="center" property="snsName" label="名称" />
                            <el-table-column width="200" align="center" property="snsTypeDetail" label="传感器类型" />
                            <el-table-column width="200"  align="center"property="snsCode" label="编号" />
                            <el-table-column width="100" align="center" property="onlineStatus" label="离线"  >
                                <template #default="scope">
                                    <span v-if="scope.row.onlineStatus === 0" style="color: red;">离线</span>
                                    <span v-else style="color: green;">在线</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-popover>
            </div>
            <div class="branch-name-gh" v-if="branchItem.cabinet" :style="{ color: fontColor }">
                {{ '柜号：' + branchItem.cabinet  }}
            </div>
            <div class="branch-name"  :style="{ color: fontColor ,bottom: branchItem.senserList&&branchItem.senserList.length>0 ? '-40px' : '-20px'  }" :class="{ 'branch-name-active': branchItem.online>0 }">
                {{ branchItem.branchName }}
            </div>
            <div class="branch-master-name branch-master-name2"  :style="{
                background: lineColor,
            }">
                {{ branchItem.previous_name }}
            </div>
            <branch-svg v-if="!branchItem.lineDevModelUrlBelow" :color="lineColor"
            ></branch-svg>
        </div>
        <!-- 递归展示下一级支线 -->
        <div v-if="branchItem.branchList && branchItem.branchList.length > 0"
            class="sub-branch-container">
            <BranchItem v-for="(subItem, subIndex) in branchItem.branchList" :key="subIndex" :branch-item="subItem"
                :branch-line-margin="branchLineMargin" :branch-line-size="branchLineSize" :line-color="lineColor"
                :font-color="fontColor" @route-device-history="routeDeviceHistory" />
        </div> 
    </div>
</template>

<script setup>
import BranchSvg from '@/components/cloudTv/BranchSvg'

const props = defineProps({
    branchItem: {
        type: Object,
        required: true
    },
    branchLineMargin: {
        type: Number,
        required: true
    },
    branchLineSize: {
        type: Number,
        required: true
    },
    lineColor: {
        type: String,
        required: true
    },
    fontColor: {
        type: String,
        required: true
    }
});

const emits = defineEmits(['route-device-history']);

const getBranchWidth = (item) => {
    if (item.type === 'empty') {
        return '80px';
    } else if (item.type === 'contact') {
        return '84px';
    } else {
        return props.branchLineMargin + 'px';
    }
};

const routeDeviceHistory = (table) => {
    emits('route-device-history', table);
};
</script>

<style scoped>
.branch-item {
    margin-bottom: 10px;
}

.branch-content {
    position: relative;
    text-align: center;
}

.branch-dot {
    position: absolute;
    left: calc(50% - 3px);
    top: -4px;
    width: 6px;
    height: 6px;
    background: #d9a116;
    border-radius: 50%;
}

.branch-line {
    display: inline-block;
    height: 150px;
    width: 1px;
    background: #d9a116;
}

</style>
